<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            /* 外边距 上右下左 */
            /* margin: 40px 30px 20px 10px; */
        }
        .d1{
            background-color: #477eff;
        }
        .d2{
            background-color: #a0ec2e;
            padding: 10px;
            box-sizing: border-box;
        }
        .d3{
            background-color: #f695ff;
            overflow: hidden;
        }
        .d2_1{
            width: 50px;
            height: 50px;
            background-color: #cc0ba2;
            /* margin: 10px; */
        }

        .d2_2{
            width: 50px;
            height: 50px;
            background-color: #7a56ff;
            /* margin: 10px; */
        }

        .d3_1{
            width: 50px;
            height: 50px;
            background-color: #dbff4c;
            /* auto只控制左右 */
            margin: 10px auto;
        }

    </style>
</head>
<body>
    <!-- 基础外边距 -->
    <!-- 居中 -->
    <!-- 多值 -->
    <!-- 外边距重叠现象 -->
    <div class="d1">
        <!-- 外边距是否对文本生效？？？ -->
        <span>1</span>
    </div>
    <div class="d2">
        <div class="d2_1">son1</div>
        <div class="d2_2">son2</div>
    </div>
    <div class="d3">
        <div class="d3_1">son1</div>
    </div>

    
</body>
</html>